<template>
  <div class="stock-box"  @touchstart="touchStart($event)" @touchend="touchEnd($event)"> 
    <!-- <div class="search-box">
        <group>
            <datetime v-model="search_time" :end-date="defult_endTime"></datetime>
        </group> 
    </div>  -->
    <div class="filter-top"> 
      <div class="search-box">
          <search v-model="searchText"
              @on-submit="onSubmit"
              position= "relative"
              placeholder="请输入商品名"
              ref="search">
          </search>    
      </div>  
    </div>
    <div class="goods-box">
        <div class="goods-list" v-for="(item,index) in goodsList" :key="index"> 
            <div class="goods-left">
                <img :src="item.poster" alt="" class="goods-img">
            </div>
            <div class="goods-right">
                <div class="goods-name">
                  {{item.goodsName}} <span v-if="item.threshold && item.threshold >= item.stock" class="iconfont  iconyujing"></span>
                </div>
                <div class="goods-price-line">
                  <!-- <div class="goods-price"><span>单价:</span>￥{{item.supplyBoxprice}}/包</div> -->
                  <div class="goods-threshold" v-if="item.threshold"><span>预警阈值:</span>{{item.threshold}}</div>
                </div>
                <div class="goods-num"><span>库存(包):</span>{{item.stock}}</div>
            </div>
            <div class="setbtn1 isbtn" @click="setStock(index)">调整库存</div>
            <div class="setbtn isbtn" @click="setWarning(index)">设置预警</div>
         </div>
         <nodata v-if="!goodsList || goodsList.length==0" />
    </div>
    <div class="height120"></div>
    <!-- 仓库 type == 2  下采购    店铺绑定了仓库才能下补货 否则下采购 -->
    
    <div class="btn isbtn" @click="goWrap" v-if="type==1 && replWarehouseId">下补货单</div>
    <div class="btn isbtn" @click="goOrder" v-else>下采购单</div>
    
    <x-dialog :show.sync="stock_change_show" class="dialog"  hide-on-blur>
      <div class="dia-title">设置库存</div>
      <div class="dia-content">
        <div class="dia-tips">正在设置 <span> {{ goodsList.length > 0 ? goodsList[set_Stock_Index].goodsName : '' }} </span> 的库存</div>
        <input type="number" class="input-dia" v-model="stockNum" placeholder="请输入库存" />
      </div>
      
      <div class="btn-box">
        <div class="cancle-btn" @click="stock_change_show = false"> 取消 </div>
        <div class="confirm-btn" @click="confirmChange">确认</div>
      </div>
    </x-dialog>
  </div>

</template>

<script>
import row from '@/components/row'
import { Group,Datetime,Search,XDialog,XInput } from 'vux'
import api from '@/api/api.js' 
import util from '@/utils/util.js'
import nodata from '@/components/nodata'
export default { 
  components: {
    row,
    Datetime,
    Group,
    nodata,
    Search,
    XDialog,
    XInput
  },
  data () {
    return { 
        stockNum:'',
        stock_change_show:false,
        defult_endTime:'',
        type:'',
        pageNum: 1,
        pageSize: 10,
        isLoading:false,
        replWarehouseId:'',
        search_time:'',
        searchText:'',
        goodsList:[], 
        totalPage:1,
        set_Stock_Index:0,
    }
  },
  created(){
    this.getAmouthDay()
  },
  mounted () { 
     this.replWarehouseId=this.$route.query.warehouseId;
     this.type=this.$route.query.type; 
     this.getStockList();
  },
  filters: {
     
  },
  
  methods: {
    setStock(index){
      this.set_Stock_Index = index ;
      this.stockNum = '';
      this.stock_change_show = true ; 

      // this.$router.push({path:'/stockSet',query:{ id:this.goodsList[index].stockId,num:this.goodsList[index].stock }})
    },
    goWrap(){ //下补货单 
      this.$store.commit("setWarehouseRepleGoods", []);
      //  上一个页面已设置
      // this.$store.commit("setWarehouseReple",this.shopList[idx].replWarehouse);
      this.$router.push({path:"/warehouseReple",query:{id:this.$route.query.id}})
    },
    goOrder(){ 
      this.$store.commit("setCheckGoods",[]);
    //   this.$store.commit("chooseShopList",[])
      this.$router.push({path:'/addOrder',query:{way:2}})
    },
    // 筛选默认最近一个月
    getAmouthDay(){ 
      let today= new Date();
    //   let mounth_ago =  new Date(today.getTime()-(30*24*60*60*1000)); 
    //   this.starTime = util.timeTampt(mounth_ago);
    //   this.endTime= util.timeTampt(today); 
      this.search_time = util.timeTampt(today); 
      this.defult_endTime = util.timeTampt(today); 
    },
    onSubmit(){
      this.pageNum = 1;
      this.getStockList();
    },
    confirmChange(){
      if(this.stockNum<0 || this.stockNum === "" ){
        return this.$vux.toast.show({
                  text: '库存不能小于0',
                  type:'text'
                })
      }
      this.stock_change_show = false;
       this.$vux.confirm.show({
        title: '警告',
        content: `确认设置${this.goodsList[this.set_Stock_Index].goodsName}的库存为${this.stockNum}吗？`, 
        onCancel () { 
        },
        onConfirm: ()=> {
          api.stockMng.stockModify({
                "stockId":this.goodsList[this.set_Stock_Index].stockId,
                "stock": this.stockNum
            },res=>{
              return this.$vux.toast.show({
                text: '设置成功',
                type:'text',
                onShow:res=>{
                  this.$set(this.goodsList[this.set_Stock_Index],"stock",this.stockNum)
                }
              })
          }) 
        }
      })
    },
    getStockList(){
      this.isLoading = true;
        api.stockMng.stockList({
            type:this.$route.query.type,
            valueId:this.$route.query.id,
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            goodsName: this.searchText ? this.searchText : ''
        },res=>{
            this.goodsList =  this.pageNum == 1 ? res.result.data :this.goodsList.concat(res.result.data);
            this.isLoading = false;
            this.totalPage = res.result.totalPage;
      }) 
    },
    touchStart(e) {
        this.startY = e.targetTouches[0].pageY;
        this.startX = e.targetTouches[0].pageX;  
    },
    scrollToEnd(e) {
        let scrollHeight = this.$el.scrollHeight; 
        let clientHeight = this.$el.clientHeight; 
        let scrollTop = this.$el.scrollTop; 
        if (scrollTop + clientHeight >= scrollHeight-50 ) { //下拉到底了
          this.doLoadMore()  
        } 
    },
    touchEnd(e) {
      if (this.isLoading) {
          return;
      }
      let endX = e.changedTouches[0].pageX,
          endY = e.changedTouches[0].pageY,
          dy = this.startY - endY,
          dx = endX - this.startX;
      if(Math.abs(dx) < 2 && Math.abs(dy) < 2) {
          return;
      }
      if (endY < this.startY) {
          this.scrollToEnd(e)
      }
    },
    doLoadMore() { 
      if(this.pageNum < this.totalPage){
        ++this.pageNum;
        this.getStockList()
      }
      return
    
    },
    setWarning(index){
      this.$vux.confirm.show({
        title: '库存预警设置',
        content: this.goodsList[index].goodsName + '库存预警设置', 
        showInput:true,
        placeholder:"请输入",
        inputAttrs:{
          type:"number"
        },
        onCancel () { 
        }, 
        onConfirm: res=> { 
          let num =res;
          if(res<0){
            return this.$vux.toast.show({
                text: '预警阈值不能小于0',
                type:'text'
              })
          }
          api.stockMng.stockThreshold({
                "stockId":this.goodsList[index].stockId,
                "threshold": res
            },res=>{
              this.goodsList[index].threshold = num;
              return this.$vux.toast.show({
                text: '设置成功',
                type:'text'
              })
          }) 
        }
      })
    },
  }
}
</script>
<style lang="less" scoped>
.dia-title{
  height:.78rem;
  line-height: .78rem;
    font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #ccc;

}
.btn-box{
  display: flex;
  &>div{
    flex: 1;
    text-align: center;
    height: 44px;
    line-height: 44px;
  }
  .cancle-btn{
    color: #666;
  }
  .confirm-btn{
    color: green;
  }
}
.dia-content{
  padding: .24rem;
  .dia-tips{
    color: #666;
    margin-bottom: .12rem;
    font-size: .22rem;
    text-align: left;
    span{
      color: red;
      font-size: .28rem;
    }
  }
  .input-dia{
    height: .68rem;
    border: 1px solid #ccc; 
    padding: 0 .20rem;
  }
}
/deep/.vux-no-group-title{
    margin-top: 0;
}
/deep/.weui-cell{
    justify-content: center;
}
/deep/.weui-cell_access .weui-cell__ft{
    flex: initial;
}
.stock-box{ 
  position: relative;
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition-duration: 300ms;
  padding-top: 45px;
}
.setbtn{
    color: #FABE00;
    padding: .08rem .18rem;
    border-radius: .08rem;
    border: 1px solid #FABE00;
    text-align: center;
    position: absolute;
    font-size: .22rem;
    right: 0;
    bottom: .24rem;
}
.filter-top{
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    border-bottom: 1px solid #eee;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 3;
    .isclick{
        border-width: 0 1px 1px 0;
        margin-top: -6px;
    }
}
.search-box{
    width: 90%;
}
.filter-content{
  background: #fff;
  width: 100%;
  padding: 20px;
  /deep/.weui-search-bar:before{
    height: 0;
  }
  /deep/.weui-search-bar::after{
    height: 0;
  }
  .row-box{
    margin-bottom: 20px;
  }
  .filter-title{
    padding-top: 20px;

  }
  .data-time-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
/deep/.weui-search-bar,.vux-search-fixed{
  position: relative !important;
  padding: 0;
  background: #fff;
}
/deep/.weui-search-bar__cancel-btn{
  text-decoration: none;
}
/deep/.weui-search-bar:after{
  display: none;
}
/deep/.weui-search-bar::before{
  display: none;
}
.setbtn1{
    color: #fff;
    padding: .08rem .18rem;
    border-radius: .08rem;
    border: 1px solid #FABE00;
    background: #FABE00;
    text-align: center;
    position: absolute;
    font-size: .22rem;
    right: 1.8rem;
    bottom: .24rem;
}
.goods-box{
    padding: 0.24rem;
}
.goods-list{
    display: flex;
    padding: .32rem 0;
    position: relative;
    &::before{
        position: absolute;
        bottom: 0;
        content: '';
        left: 0;
        right: -20px;
        height: 1px;
        background: #f5f5f5;
    }
}

.goods-img{
    width: 1.48rem;
    height: 1.48rem;
    border-radius: .12rem;
    background: #ddd;
}
.goods-name{
    font-size: .30rem;
    font-weight: bold;
    line-height: .34rem;
    display: flex;
    align-items: center;
}
.goods-price-line{
  display: flex;
  justify-content: space-between;

}
.goods-price,.goods-num{
    font-size: .24rem;
    & span{
        margin-right: .12rem;
        color: #999;
    }
}
.goods-right{
    width: 1.48rem;
    height: 1.48rem;
    flex: 1;
    padding-left: .20rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.height120{
    height: 60px;
}
.btn{
    text-align: center;
    line-height: 50px;
    background: #FABE00;
    color: #fff;
    height: 50px;
    font-size: 16px;
    letter-spacing: 4px;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
}
.iconyujing{
  color: #FABE00;
  font-weight: 400;
  margin-left: .12rem;
}
</style>